import styled from "styled-components";
import React from "react";
import { DownOutlined, InboxOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import {
  Dropdown,
  Space,
  Typography,
  Button,
  Flex,
  Upload,
  message,
} from "antd";
import type { UploadProps } from "antd";
import { wgs84togcj02 } from "./utils/wgs84togcj02";
import { gcj02towgs84 } from "./utils/gcj02towgs84";
import ReactJson from "react-json-view";
import { FileSaver } from "../../hooks/FileSaver";
interface data {
  key: string;
  label: string;
  transForm: (obj: object | undefined) => void;
}
const { Dragger } = Upload;
const Content = styled.div`
  width: 100%;
  height: fit-content;
`;
const Title = styled.div`
  font-size: 20px;
`;
const Left = styled.div`
  width: 45%;
  padding: 10px;
`;
const Middle = styled.div`
  width: 10%;
`;
const Right = styled.div`
  width: 45%;
  padding: 10px;
`;
const PreJson = styled.div`
  height: 500px;
  width: 100%;
  overflow-y: scroll;
`;
const itemData = [
  {
    key: "1",
    label: "wgs84togcj02",
    transForm: wgs84togcj02,
  },
  {
    key: "2",
    label: "gcj02towgs84",
    transForm: gcj02towgs84,
  },
];

export function GeoJson() {
  const [item, setItem] = React.useState<data | null>(itemData[0]);
  const [fileJson, setFileJson] = React.useState<object | undefined>();
  const [deelFileJson, setDeelFileJson] = React.useState<object | undefined>();
  const items: MenuProps["items"] = itemData.map((item) => ({
    key: item.key,
    label: item.label,
    onClick: function () {
      setItem(item);
    },
  }));
  const props: UploadProps = {
    name: "file",
    accept: ".json",
    showUploadList: false,
    multiple: true,
    beforeUpload(file, FileList) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
          const result = evt.target?.result;
          if (result) {
            const json = JSON.parse(result as string);
            setFileJson(json);
            message.success("文件读取成功");
            resolve(json);
          }
        };
      });
    },

    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };
  const handleClick = () => {
    if (deelFileJson) {
      const content = JSON.stringify(deelFileJson); //data为json格式的数据
      let blob = new Blob([content], { type: "text/plain;charset=utf-8" });
      FileSaver(blob, {
        name:"jsondata.json"
      })
    }else{
      message.warning('请转换文件！！')
    }
  };
  return (
    <Content>
      <Title>GeoJson文件坐标系转换工具，暂只支持json文件</Title>
      <div
        style={{
          display: "flex",
          alignContent: "center",
          alignItems: "flex-start",
        }}
      >
        <Left>
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击或拖拽文件到这里</p>
            <p className="ant-upload-hint">暂只支持json文件</p>
          </Dragger>
          <PreJson>
            <ReactJson
              src={fileJson || {}}
              theme={"bright:inverted"}
              collapsed={true}

            ></ReactJson>
          </PreJson>
        </Left>
        <Middle>
          <Dropdown
            menu={{
              items,
              selectable: true,
              defaultSelectedKeys: ["1"],
            }}
          >
            <Typography.Link>
              <Space>
                {item?.label}
                <DownOutlined />
              </Space>
            </Typography.Link>
          </Dropdown>
          <Flex gap="small" wrap="wrap" style={{ marginTop: "20px" }}>
            <Button
              type="primary"
              onClick={() => {
                if (item && item.transForm) {
                  setDeelFileJson(item.transForm(fileJson)!);
                }
              }}
            >
              开始转换
            </Button>
          </Flex>
        </Middle>
        <Right>
          <div style={{ margin: "10px 0 10px 0" }}>
            <Button type="primary" onClick={handleClick}>导出json文件</Button>
          </div>
          <PreJson>
            <ReactJson
              src={deelFileJson || {}}
              theme={'colors'}
              collapsed={true}
            ></ReactJson>
          </PreJson>
        </Right>
      </div>
    </Content>
  );
}
